<template>
  <div class="user">
    <!-- 在模板中获取到id -->
    <h2>User: {{ $route.params.id }}</h2>
  </div>
</template>

<script setup>
  import {
    useRoute,
    onBeforeRouteUpdate,
    onBeforeRouteLeave,
  } from "vue-router";

  const route = useRoute();
  console.log(route.params.id);

  // onBeforeRouteUpdate: 路由更新前触发
  onBeforeRouteUpdate((to, from) => {
    console.log(to.params.id);
  });

  // onBeforeRouteLeave: 路由离开前触发
  onBeforeRouteLeave((to, from, next) => {
    console.log(to.params.id);
    next();
  });
</script>

<style lang="scss" scoped></style>
